<script setup lang="ts">
import { options } from '@/plugin/index.ts'
import useCounterStore from '@/stores/useCounterStore.ts'

const { officialPlugins } = options

const counterStore = useCounterStore()
console.log(counterStore)
const str = ref('')

function usePluginClick() {
  str.value = JSON.parse(JSON.stringify(counterStore))
}
</script>

<template>
  <div class="cjs-wrapper">
    <a-typography v-for="officialPlugin in officialPlugins" :key="officialPlugin" :title="officialPlugin">
      <div v-if="officialPlugin === 'pinia'">
        <a-typography-title :level="2">
          {{ officialPlugin }}
        </a-typography-title>
        <a-typography-paragraph>
          <div class="mb-3px">
            <a-button type="primary" @click="usePluginClick">
              使用pinia
            </a-button>
            {{ str }}
          </div>
        </a-typography-paragraph>
      </div>
    </a-typography>
  </div>
</template>

<style scoped lang="scss">

</style>
